import React, { useState, useEffect } from 'react';
import { Breadcrumb, Button, List, Card, Row, Popconfirm, Switch, Modal, Form, Input, Col, Space, Divider } from 'antd';
import { history } from 'umi';
import { connect } from 'dva';

const Favorite = ({ collectionList, dispatch, userInfo }) => {
  const [form] = Form.useForm();
  const [isModal, setIsModal] = useState(false);
  const [currentCollection, setCurrentCollection] = useState(null);
  const [status, setStatus] = useState('');
  const addCollection = (values) => {
    if (status === 'add') {
      dispatch({
        type: 'favorite/addCollection',
        payload: {
          userId: userInfo.userId,
          ...values,
        },
      });
    } else {
      dispatch({
        type: 'favorite/updateCollection',
        payload: {
          collectionId: currentCollection.collectionId,
          ...values,
        },
      })
    }
    setIsModal(false);
    form.resetFields();
  };


  return (<>
    <br />
    <Row justify="space-around">
      <Col span={20}>
        <Button style={{ width: '100%', borderRadius: 10, margin: 'auto' }} onClick={() => { setIsModal(true), setStatus('add') }}>+ 新建收藏夹</Button>
      </Col>
    </Row>
    <br />
    {/* margin-right: 6.5rem; */}
    <Col span={22} offset={1}>
      <List
        size="small"
        pagination={{ pageSize: 5 }}
        dataSource={collectionList}
        renderItem={item => (
          <List.Item key={item.collectionId}>
            <Card hoverable style={{ width: '90%', borderRadius: 10, margin:'auto' }}
              key={item.collectionId}
              onClick={() => {
                history.push({
                  pathname: '/favorite/favoriteDetail',
                  state: { collectionId: item.collectionId }
                })
              }}
              title={item.collectionName}
              extra={[
                <>
                  <Button type="link" onClick={(event) => {
                    event.stopPropagation(); setCurrentCollection(item),
                      setIsModal(true), setStatus('edit'), form.setFieldsValue(item)
                  }}>编辑</Button>
                  <Popconfirm title="确认删除该收藏夹？"
                    onConfirm={(event) => {
                      event.stopPropagation();
                      dispatch({
                        type: 'favorite/delCollection',
                        payload: {
                          collectionId: item.collectionId,
                        },
                      })
                    }} okText="确认" cancelText="取消">
                    <Button type="link" danger onClick={(event) => event.stopPropagation()}>删除</Button>
                  </Popconfirm>
                </>
              ]}
            >
              <Card.Meta
                description={item.collectionDescribe}
              />
            </Card>
          </List.Item>
        )}></List>
    </Col>
    <Modal title={status === 'add' ? '新建收藏夹' : '编辑收藏夹'} open={isModal} maskClosable={false} onCancel={() => setIsModal(false)}
      footer={[
        <Button key="back" onClick={() => setIsModal(false)}>取消</Button>,
        <Button key="submit" type="primary" onClick={() => form.submit()}>确定</Button>,
      ]}>
      <Form form={form} name="basic" labelCol={{ span: 6, }} wrapperCol={{ span: 16, }} onFinish={addCollection}>
        <Form.Item label="收藏夹名称" name="collectionName" rules={[{ required: true, message: '请输入收藏夹名称!' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="描述" name="collectionDescribe">
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  </>
  )
};

export default connect(({ favorite, user }) =>
({
  collectionList: favorite.collectionList,
  userInfo: user.userInfo
}))(Favorite);